<template>
    <div class="app-container">
        <div class="filter-container">
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="handleAddConfigfun">
                添加
            </el-button>
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-refresh" @click="getList">
                刷新
            </el-button>
            <el-button class="filter-item" type="danger" icon="el-icon-delete" @click="multiDel">
                批量删除
            </el-button>
        </div>
        <el-table
                ref="adclassTable"
                v-loading="listLoading"
                :data="list"
                row-key="id"
                border
                highlight-current-row
                style="width:100%"
                max-height="750"
                default-expand-all
            >
            <el-table-column type="selection" width="50" align="center" :selectable="canSelect" />
            <el-table-column label="ID" prop="id" align="center" width="80">
                <template slot-scope="{row}">
                    <span>{{ row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="分类名称" prop="title" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column label="排序" prop="sort" align="center" width="130">
                <template slot-scope="{row}">
                    <span>{{ row.sort }}</span>
                </template>
            </el-table-column>
            
            <el-table-column label="操作" prop="action" align="center" width="150">
                <template slot-scope="{row}">
                    <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="delFun(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'新增'">
            <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px">
                
                <el-form-item label="分类名称" prop="title">
                    <el-input v-model="temp.title" placeholder="请输入分类名称" style="width:400px" />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="temp.sort" placeholder="请输入排序" style="width:400px" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible=false">取消</el-button>
                <el-button type="primary" @click="dialogType==='create'?createFun():updateFun()">提交</el-button>
            </div>
        </el-dialog>
    </div>
  </template>
  
  <script>
    import { getAdclsses, addAdclass, deleteAdclass, updateAdclass, multiDeleteAdclasses } from '@/api/adclass'

    export default {
        data() {
            return {
                list: [],
                listLoading: true,
                dialogVisible: false,
                dialogType: 'create',
                temp: {
                    title: '',
                    sort: 0
                }
            }
        },
        created() {
            this.getList()
        },
        methods: {
            // 获取配置列表
            getList() {
                this.listLoading = true
                getAdclsses().then(res => {
                    this.list = res.data
                    this.listLoading = false
                })
            },
            // 打开添加窗口
            handleAddConfigfun() {
                this.tindex = 0
                this.resetTemp()
                this.dialogType = 'create'
                this.dialogVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                })
            },

            // 重置表单数据
            resetTemp() {
                this.tindex = 0
                this.temp = {
                    title: '',
                    sort: 0
                }
            },
            // 打开编辑窗口
            handleUpdate(row) {
                this.tindex = 0
                this.temp = Object.assign({}, row)
                this.dialogType = 'edit'
                this.dialogVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                })
            },
            // 新增
            createFun() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        const tempData = Object.assign({}, this.temp)
                        addAdclass(tempData).then(res => {
                            this.getList()
                            this.dialogVisible = false
                            this.$notify({
                                title: '添加成功',
                                message: res.msg,
                                type: 'success',
                                duration: 2000
                            })
                        })
                    }
                })
            },
            // 更新
            updateFun() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        const tempData = Object.assign({}, this.temp)
                        updateAdclass(tempData.id, tempData).then(res => {
                            this.getList()
                            this.dialogVisible = false
                            this.$notify({
                                title: '更新成功',
                                message: res.msg,
                                type: 'success',
                                duration: 2000
                            })
                        })
                    }
                })
            },
            // 删除
            delFun(id) {
                this.$confirm('确认删除该信息？', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async() => {
                    const res = await deleteAdclass(id)
                    this.getList()
                    this.$notify({
                        title: '删除成功',
                        message: res.msg,
                        type: 'success',
                        duration: 2000
                    })
                }).catch(e => e)
            },
            // 批量删除
            multiDel() {
                const select = this.$refs.adclassTable.selection
                const ids = []
                select.forEach(item => {
                    ids.push(item.id)
                })
                this.$confirm('是否删除选中的管理员？', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async() => {
                    const res = await multiDeleteAdclasses(ids)
                    this.getList()
                    this.$notify({
                        title: '删除成功',
                        message: res.msg,
                        type: 'success',
                        duration: 2000
                    })
                }).catch(e => e)
            },


        }
    }
  </script>
  
  <style lang="scss" scoped>
    .app-container {
        .roles-table {
            margin-top: 30px;
        }
        .permission-tree {
            margin-bottom: 30px;
        }
        ::v-deep {
            .el-dialog {
                .el-dialog__header {
                    border-bottom: 1px solid #ebebeb;
                }
                .el-dialog__footer {
                    border-top: 1px solid #ebebeb;
                }
            }
        }
    }
    
  </style>